/**
 * Created by Freeman on 2016/7/29.
 */
import React, {Component, PropTypes} from 'react'
import classnames from 'classnames'
class List extends Component {
    constructor(props, context) {
        super(props, context);

    }
    renderFilter(items,search){
        let session = this.props.session;
        let {selectUser} = this.props.actions;
        let users = items.filter(item =>
            item.name.indexOf(search) > -1
        );
        return (
            users.map((item,index) =>
                <li
                    key={item.id}
                    className={
                        classnames({
                            'active':session.userId === item.id
                        })
                    }
                    onClick={() =>selectUser(index)}
                >
                    <img className="avatar" width="30" height="30" src={item.img}/>
                    <p className="name">{item.name}</p>
                </li>
            )
        )
    }

    render() {
        const {items,search}  = this.props.userList;
        return (
            <div className="m-list">
                <ul>
                    {this.renderFilter(items,search)}
                </ul>
            </div>
        )
    }
}

List.propTypes = {
    userList: PropTypes.object.isRequired,
    session: PropTypes.object.isRequired,
    actions:PropTypes.object.isRequired
};

export default List;